import React, { Component } from 'react';

/* 
    1. 组件更新时
    new props 进行更新
    // 性能优化思路：通过比对传进来的数据，如果数据和之前保持一致，则进行拦截阻断，否则触发视图更新
*/
class Tesingchild extends Component {
    state ={}
    static getDerivedStateFromProps(props,state){
        console.log("1.getDerivedStateFromProps:",props);
        return null;
    }
    shouldComponentUpdate(nextProps,nextState){
        console.log("2.shouldComponentUpdate");
        // 优化 减少不必要更新
        if(nextProps.msg===this.props.msg){
            return false
        }
        return true; // 组件更新
    }
    render() {
        console.log("3. 执行render函数");
        return (
            <div>
                <h1>Demo组件{this.props.msg}</h1>
            </div>
        );
    }
    getSnapshotBeforeUpdate(props,state){
        console.log("4. getSnashotBeforeUpdate")
        return 100;
    }
    componentDidUpdate(props,state,snapshot){
        console.log("5. componentDidUpdate")
        console.log("来自 getSnapshotBeforeUpdate的值：",snapshot)
    }
}
class Tesing extends Component {
    state={
        msg:"🐂"
    };
    handleClick=(e)=>{
        this.setState({
            msg:"🐂"
        })
    }
    render () {
        return (
            <div>
                <Tesingchild msg={this.state.msg}></Tesingchild>
                <button onClick={this.handleClick}>改变信息</button>
            </div>
        )
    }
}
export default Tesing;
